<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar :title="$route.name" left-arrow right-text="登录"
      @click-right="$router.push('/login' )"/>
    <!-- 轮播图 -->
    <van-swipe :autoplay="2000">
      <van-swipe-item v-for="item in bannerlist" :key="item.id">
        <img class="imgUrl" :src="item.img" />
      </van-swipe-item>
    </van-swipe>
    <!-- 导航展示 -->
    <van-grid :border="false" column-num="5">
      <van-grid-item>
        <van-image :src="require('../assets/images/icon/seckill.png')" />
        <p class="navtitle">限时秒杀</p>
      </van-grid-item>
      <van-grid-item>
        <van-image :src="require('../assets/images/icon/top.png')" />
        <p class="navtitle">畅销商品</p>
      </van-grid-item>
      <van-grid-item>
        <van-image :src="require('../assets/images/icon/brand.png')" />
        <p class="navtitle">品质大牌</p>
      </van-grid-item>
      <van-grid-item>
        <van-image :src="require('../assets/images/icon/selfsupport.png')" />
        <p class="navtitle">小U自营</p>
      </van-grid-item>
      <van-grid-item>
        <van-image :src="require('../assets/images/icon/integral.png')" />
        <p class="navtitle">积分商城</p>
      </van-grid-item>
    </van-grid>
    <!-- 首页商品切换 -->
    <van-tabs type="card">
      <van-tab title="热门推荐">
        <van-card
          @click='goDetail(item.id)'
          v-for="item in hotList"
          :key="item.id"
          num="1"
          :price="item.price | toPrice"
          desc="描述信息"
          :title="item.goodsname"
          :thumb="item.img"
          :origin-price="item.market_price"
        />
      </van-tab>
      <van-tab title="上新推荐">
        <van-card
          @click='goDetail(item.id)'
          v-for="item in newList"
          :key="item.id"
          num="1"
          :price="item.price | toPrice"
          desc="描述信息"
          :title="item.goodsname"
          :thumb="item.img"
          :origin-price="item.market_price"
        />
      </van-tab>
      <van-tab title="所有商品">
        <van-card
          @click='goDetail(item.id)'
          v-for="item in goodsList"
          :key="item.id"
          num="1"
          :price="item.price | toPrice"
          desc="描述信息"
          :title="item.goodsname"
          :thumb="item.img"
          :origin-price="item.market_price"
        />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
//引入封装好的接口
import { getBanner, homeGoods } from "../request/api";
export default {
  data() {
    return {
      bannerlist: [],
      newList: [],
      hotList: [],
      goodsList: [],
    };
  },
  mounted() {
    /* 生命周期 */
    //组件一加载就调用轮播图接口
    getBanner().then((res) => {
      // console.log(res, "响应");
      if (res.code == 200) {
        this.bannerlist = res.list;
      }
    });
    //调用首页商品列表
    homeGoods().then((res) => {
      /* 
        首页的商品列表  是和  后台管理的商品管理列表  联动的
        主要区分模块是根据：
              商品列表中的isnew是否是商品  
          以及  
              ishot是否热卖区分的 
      */
      console.log(res, "首页的商品列表");
      if (res.code == 200) {
        this.hotList = res.list[0].content;
        this.newList = res.list[1].content;
        this.goodsList = res.list[2].content;
      }
    });
  },
  methods:{
    //跳转商品详情
    goDetail(id){
      // this.$router.push('/detail?id='+id)
      this.$router.push({
        path:'/detail',
        query:{
          id,
        }
      })
    }
  },
};
</script>

<style scoped>
.imgUrl {
  width: 100%;
  height: 3.5rem;
}
.navtitle {
  font-size: 0.14rem;
}
</style>